<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p id="a"></p>

    <script>
        // JS 的可控对象定义(响应式对象定义)方法 (ES6将工具方法以对应的描述对象进行重新指向关联)
        // Object.defineProperty( targetObj,propName,propDesc )
        // Reflect.defineProperty( targetObj,propName,propDesc )
        //      targetObj 被操作的目标对象
        //      propName 目标对象需要增加的可控属性
        //      propDesc 增加的可控属性的详细控制设置
        //           + enumerable:描述属性是否可以循环 默认值为 false
        //           + writable:描述属性是否可以被修改 默认值 false ; 取值false等同于定义 只读属性
        //           + value:描述属性第一次创建时的默认值
        //           + get:function(){ return 变量值 } 描述属性取值操作和取值结果 (和value属性功能冲突)
        //           + set:function(nv){  } 描述属性赋值操作 (和writable属性功能冲突) ; 
        //                                  该方法没有赋值操作逻辑 或 定义get时未定义set方法，属性为只读属性
        //            ** get 和 set 方法描述可控属性时，需要借助中间变量进行数据转存

        // let obj = Object.defineProperty({},"msg",{})

        let obj = {}
        obj.aaa = "aa";
        Object.defineProperty(obj, "msg", {
            enumerable: false,
            writable: false,
            value: "msg默认值"
        })
        Reflect.defineProperty(obj, "info", {
            enumerable: true,
            writable: true,
            value: "info默认值"
        })

        let _text = "text默认值";
        let pDom = document.querySelector("#a")
        // 数据劫持
        Object.defineProperty(obj, "text", {
            enumerable: true,
            get: function () {
                // return "text默认值"
                return _text;
            },
            // 响应式：数据变化=>页面变化
            //        能够知道数据有没有发生变化 【修改数据的方式很多】
            //        于数据有关的页面要发生更新 
            set: function (nv) {
                console.log("obj.text被赋值:", nv)
                _text = nv;
                pDom.textContent = _text;
            }
        })

        console.log(obj)
        console.log("=====>")
        for (const key in obj) {
            console.log(key)
        }
        console.log("<=====")

    </script>
</body>

</html>